/*
 * 社交数据大盘
 * @Author: along
 * @Date: 2020-01-14 18:17:00
 */
<template>
    <div class="container socialDataAnalysis">
        <!-- 匹配数据大盘 -->
        <shopHead
            :title="social.social_match"
            v-if="authResult.auth_match_data"
            id="social_match"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_match_data"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_match.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(4)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匹配页面访客数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指去掉掌上大学用户之外的独立访问数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialMatch.match_visit_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匹配页面新增访客数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="新增的访问匹配页面的新用户的数量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialMatch.match_visit_new_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">渗透率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="当日新增的访客中玩过匹配的人数/当日新增访客数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialMatch.match_new_user_count !== 0 && socialMatch.match_visit_new_user_count !== 0">
                                {{ (socialMatch.match_new_user_count / socialMatch.match_visit_new_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">可匹配总人数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指答题通过的用户数 - 掌上大学答题通过用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialMatch.can_match_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匹配使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指使用过匹配的用户数 / 可匹配总人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialMatch.match_user_count !== 0 && socialMatch.can_match_user_count !== 0">
                                {{ (socialMatch.match_user_count / socialMatch.can_match_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                style="padding: 0px;background:#fff"
                v-if=" !authResult.auth_match_visitor && !authResult.auth_new_visitor ? false : true"
            >
                <div
                    class="student-content"
                    v-if="authResult.auth_match_visitor"
                >
                    <div class="zd-student-tree">
                        <div class="main-content">
                            <p class="main-content-title">匹配页面访客解析</p>
                            <div class="main-content-right">
                                <el-date-picker
                                    v-model="social_visitor.date"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    size="small"
                                    @change="fnFilterData(5)"
                                />
                            </div>
                        </div>
                        <div class="main-seat" />
                        <zdTree :data="socialVisitor"/>
                    </div>
                    <div
                        class="zd-student-tree"
                        v-if="authResult.auth_new_visitor"
                    >
                        <div class="main-content">
                            <p class="main-content-title">匹配页面新增访客解析</p>
                            <div class="main-content-right">
                                <el-date-picker
                                    v-model="social_add_visitor.date"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['00:00:00', '23:59:59']"
                                    size="small"
                                    @change="fnFilterData(6)"
                                />
                            </div>
                        </div>
                        <div class="main-seat" />
                        <zdAddTree :data="socialAddVisitor"/>
                    </div>
                </div>
            </div>
        </div>
        <!-- 匹配页面数据 -->
        <shopHead
            :title="social.social_match_data"
            v-if="authResult.auth_use"
            id="social_match_data"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_use"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_match_data.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(7)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">发起匹配人数</p>
                        </div>
                        <div class="zd-content">{{ socialMatchData.match_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">总匹配次数</p>
                        </div>
                        <div class="zd-content">{{ socialMatchData.match_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">人均匹配次数</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="人均匹配次数=总匹配次数/发起匹配人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialMatchData.match_count !== 0 && socialMatchData.match_user_count !== 0">
                                {{ (socialMatchData.match_count / socialMatchData.match_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匹配记录使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指曾经查看过匹配记录页面的人数/可匹配人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialMatchData.match_history_expose_user_count !== 0 && socialMatchData.can_match_user_count !== 0">
                                {{ (socialMatchData.match_history_expose_user_count / socialMatchData.can_match_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">筛选按钮使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="指曾经使用过筛选按钮的可匹配人数/可匹配总人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialMatchData.match_filter_click_user_count !== 0 && socialMatchData.can_match_user_count !== 0">
                                {{ (socialMatchData.match_filter_click_user_count / socialMatchData.can_match_user_count).toFixed(3) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匹配个人中点击数</p>
                        </div>
                        <div class="zd-content">{{ socialMatchData.click_head_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">新增完成测试的人数</p>
                            <el-popover
                                placement="top-start"
                                trigger="hover"
                                width="200"
                                content="同时拥有大于等于6个标签和生日信息的人数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialMatchData.increase_exam_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">完成测试的总人数</p>
                        </div>
                        <div class="zd-content">{{ socialMatchData.complete_exam_user_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 匹配留存率 -->
        <div
            class="student-home"
            v-if="authResult.auth_active"
            style="padding-bottom: 20px"
        >
            <div class="main-content">
                <div style="display:flex;align-items: center;">
                    <p class="main-content-title">匹配留存率</p>
                    <el-popover
                        placement="top-start"
                        width="300"
                        trigger="hover"
                        content="指指当日新增用户中玩匹配的人，第x日还玩的人数/当日的初始人数">
                        <el-button
                            slot="reference"
                            style="border:none;margin-top:-2px;background:transparent;margin-left:-3px"
                        >
                            <i class="el-icon-hand-tishi iconfont" />
                        </el-button>
                    </el-popover>
                </div>
            </div>
            <div class="main-seat" />
            <div
                class="student"
                style="height: 350px"
            >
                <el-table
                    :data="socialRetain"
                    height="300px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="time"
                        label="日期"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.time * 1000 | dateFormatter('yyyy/MM/dd') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="new_user_match"
                        label="新增用户中使用匹配的人数"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user_match_day_2"
                        label="次日留存率"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.new_user_match_day_2 !== 0 && scope.row.new_user_match !== 0">
                                {{ Number(scope.row.new_user_match_day_2 / scope.row.new_user_match).toFixed(2) }}%
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="new_user_match_day_3"
                        label="3日留存率"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.new_user_match_day_3 !== 0 && scope.row.new_user_match !== 0">
                                {{ Number(scope.row.new_user_match_day_3 / scope.row.new_user_match).toFixed(2) }}%
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="new_user_match_day_7"
                        label="7日留存率"
                        align="center"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.new_user_match_day_7 !== 0 && scope.row.new_user_match !== 0">
                                {{ Number(scope.row.new_user_match_day_7 / scope.row.new_user_match).toFixed(2) }}%
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- /分页 -->
                <div
                    class="pagination-wrapper clearfix"
                >
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page.sync="page.now_page"
                        :total="page.total_count"
                        :page-size="page.page_size"
                        @current-change="fngetRetain"
                    />
                </div>
            </div>
        </div>
        <!-- 我的大学墙数据大盘 -->
        <shopHead
            :title="social.social_school"
            id="social_school"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div class="student-home">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_school.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">总大学页访客数</p>
                        </div>
                        <div class="zd-content">{{ socialSchool.school_all_visit_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">我的大学页面访客数</p>
                        </div>
                        <div class="zd-content">{{ socialSchool.school_home_visit_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">夸奖页面访客数</p>
                        </div>
                        <div class="zd-content">{{ socialSchool.school_praise_visit_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">Send使用率</p>
                        </div>
                        <div class="zd-content">{{ socialSchool.school_praise_send_percent }}{{ socialSchool.school_praise_send_percent > 0 ? '%' : '' }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">匿名使用率</p>
                        </div>
                        <div class="zd-content">{{ socialSchool.anonymous_praise_percent }}{{ socialSchool.anonymous_praise_percent > 0 ? '%' : '' }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="student">
            <!-- 数据展示 -->
            <div class="student-home">
                <div class="main-content">
                    <p class="main-content-title">其它数据</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_data.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(2)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">点赞人数</p>
                        </div>
                        <div class="zd-content">{{ socialSchoolData.praise_like_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">删除使用率</p>
                        </div>
                        <div class="zd-content">{{ socialSchoolData.praise_delete_percent }}{{ socialSchoolData.praise_delete_percent > 0 ? '%' : '' }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">被举报人数</p>
                        </div>
                        <div class="zd-content">{{ socialSchoolData.praise_report_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 身份认证数据 -->
        <shopHead
            :title="social.school_data"
            id="school_data"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div class="student-home">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_verfy.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(3)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">新增身份认证人数</p>
                        </div>
                        <div class="zd-content">{{ socialVerfy.increase_verify_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">新增身份认证通过人数</p>
                        </div>
                        <div class="zd-content">{{ socialVerfy.increase_verify_pass_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">已认证人数</p>
                        </div>
                        <div class="zd-content">{{ socialVerfy.total_verify_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">已认证通过人数</p>
                        </div>
                        <div class="zd-content">{{ socialVerfy.total_verify_pass_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 班级认证数据 -->
        <shopHead
            :title="social.class_verify_data"
            id="class-data"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div class="student-home">
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="class_verfy.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(14)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">新增用户创建班级数量</p>
                        </div>
                        <div class="zd-content">{{ classVerifyData.newly_increased_class_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">新增加入班级人数</p>
                        </div>
                        <div class="zd-content">{{ classVerifyData.newly_increased_join_class_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">用户创建班级总数量</p>
                        </div>
                        <div class="zd-content">{{ classVerifyData.student_creation_class_total_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">班级总数量</p>
                        </div>
                        <div class="zd-content">{{ classVerifyData.already_exists_class_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">加入班级总人数</p>
                        </div>
                        <div class="zd-content">{{ classVerifyData.join_class_people_total_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 答题流程数据 -->
        <shopHead
            :title="social.socilal_answer"
            v-if="authResult.auth_exam"
            id="social_answer"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_exam"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="socilal_answer.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(8)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">学校未开通页面访客量</p>
                        </div>
                        <div class="zd-content">{{ socialAnswer.forum_apply_expose_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">申请开通人数</p>
                        </div>
                        <div class="zd-content">{{ socialAnswer.forum_apply_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">IM答题页面访客量</p>
                        </div>
                        <div class="zd-content">{{ socialAnswer.exam_expose_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">答题人数</p>
                        </div>
                        <div class="zd-content">{{ socialAnswer.exam_submit_user_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">通过答题人数</p>
                        </div>
                        <div class="zd-content">{{ socialAnswer.exam_pass_user_count }}</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- IM对话数据 -->
        <shopHead
            :title="social.social_im"
            v-if="authResult.auth_im"
            id="social_im"
        />
        <div class="student">
            <!-- 数据展示 -->
            <div
                class="student-home"
                v-if="authResult.auth_im"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_im.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(9)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">点燃火焰数</p>
                        </div>
                        <div class="zd-content">{{ socialIm.candle_count }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">用户卡片使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="用户卡片点击人数/进入过匹配IM页面的用户">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_user_card_click_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_user_card_click_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">右上角更多使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="点击过右上角更多的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_more_click_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_more_click_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">图片使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="发送过图片的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_send_image_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_send_image_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">相册使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="拍照并发送过的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_send_image_by_camera_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_send_image_by_camera_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">语音使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="语音并发送的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_send_voice_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_send_voice_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">表情使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="通过表情icon选择表情并发送的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.char_send_emoji_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.char_send_emoji_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">拉黑使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="完成拉黑他人的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_block_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_block_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">举报使用率</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="提交过举报的用户数/进入过匹配IM页面的用户数">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">
                            <span v-if="socialIm.chat_report_user_count !== 0 && socialIm.chat_expose_user_count !== 0">
                                {{ (socialIm.chat_report_user_count / socialIm.chat_expose_user_count).toFixed(2) | isNaN }}
                            </span>
                            <span v-else>0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 自己个人主页数据 -->
        <shopHead
            :title="social.social_page"
            v-if="authResult.auth_page && !authResult.auth_my_page ? false : true"
            id="social_page"
        />
        <div
            class="student-home"
            v-if="authResult.auth_page"
        >
            <div
                class="main-content"
                v-if="authResult.auth_my_page"
            >
                <p class="main-content-title">数据展示</p>
                <div class="main-content-right">
                    <p style="margin-right: 10px">*仅对“我的访客使用率”进行筛选</p>
                    <el-date-picker
                        v-model="social_page.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        @change="fnFilterData(10)"
                    />
                </div>
            </div>
            <div
                class="main-seat"
                v-if="authResult.auth_my_page"
            />
            <div class="zd-data zd-data-fore">
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">个人资料完整人数</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="指个人主页的编辑资料页面所有必填字段填充完整的用户数量">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ socialMyPage.user_info_complete_user_count }}</div>
                </div>
                <div
                    class="zd-list"
                    @click=" dialogVisible = true "
                >
                    <div class="zd-head">
                        <p class="zd-head-title">主页三元素完整人数</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="指个人主页中的自我介绍、照片墙、标签全部填充完整的用户数量">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont"/>
                            </el-button>
                        </el-popover>
                    </div>
                    <div
                        class="zd-content"
                        style="color:#20A0FF;cursor:pointer"
                    >{{ socialMyPage.student_index_info_complete_user_count }}</div>
                </div>
                <div class="zd-list">
                    <div class="zd-head">
                        <p class="zd-head-title">照片墙平均张数</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="指照片墙照片总张数/使用了照片墙功能的用户数">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ socialMyPage.photos_count_avg }}</div>
                </div>
                <div
                    class="zd-list"
                    v-if="authResult.auth_my_page"
                >
                    <div class="zd-head">
                        <p class="zd-head-title">我的访客使用率</p>
                        <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            content="指从我的访客点击进入过他人主页的人数 / 可匹配人数">
                            <el-button slot="reference">
                                <i class="el-icon-hand-tishi iconfont" />
                            </el-button>
                        </el-popover>
                    </div>
                    <div class="zd-content">{{ socialPage.visit_use_percent }}</div>
                </div>
            </div>
        </div>
        <!-- 火柴火焰漏斗 -->
        <shopHead
            :title="social.social_match_type"
            id="social_match_type"
            v-if="true"
        />
        <div
            class="main-funnel funnel-content"
            v-if="true"
        >
            <div class="main-content">
                <p class="main-content-title">火柴-火焰漏斗</p>
                <div class="main-content-right">
                    <el-date-picker
                        v-model="social_my_math.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        @change="fnFilterData(11)"
                    />
                </div>
            </div>
            <div class="main-seat" />
            <div class="main-funnel-cont">
                <div
                    class="main-cont-list"
                    style="padding-right: 15px"
                >
                    <p class="main-list-title">匹配对话人数</p>
                    <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        content="曾经玩匹配进入对话页且发送过消息的人数">
                        <el-button
                            slot="reference"
                            class="el-button-hover"
                        >
                            <i class="el-icon-hand-tishi iconfont"/>
                        </el-button>
                    </el-popover>
                    <p class="main-list-cont blue">
                        <span class="main-list-ratio">{{ socialMyMatch.chat_expose_user_count }}</span>
                    </p>
                </div>
                <div class="main-cont-arrow">
                    <div class="main-arrow-list">
                        <p class="main-arrow-line" />
                        <p class="main-arrow-delta" />
                    </div>
                </div>
                <div class="main-cont-list">
                    <p class="main-list-title">点燃1份火柴的人数</p>
                    <p class="main-list-cont mail">
                        <span class="main-list-ratio">{{ socialMyMatch.chat_candle_count_step_one }}</span>
                    </p>
                </div>
                <div class="main-cont-arrow">
                    <div class="main-arrow-list">
                        <p class="main-arrow-line" />
                        <p class="main-arrow-delta" />
                    </div>
                </div>
                <div class="main-cont-list">
                    <p class="main-list-title">点燃2份火柴的人数</p>
                    <p class="main-list-cont green">
                        <span class="main-list-ratio">{{ socialMyMatch.chat_candle_count_step_two }}</span>
                    </p>
                </div>
                <div class="main-cont-arrow">
                    <div class="main-arrow-list">
                        <p class="main-arrow-line" />
                        <p class="main-arrow-delta" />
                    </div>
                </div>
                <div class="main-cont-list">
                    <p class="main-list-title">点燃火焰的人数</p>
                    <p class="main-list-cont red">
                        <span class="main-list-ratio">{{ socialMyMatch.chat_candle_count_step_three }}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 主页三元素 -->
        <el-dialog
            :visible.sync="dialogVisible"
            width="660px"
            :close-on-click-modal="false"
        >
            <el-table
                :data="list"
                height="100%"
                style="width: 100%;"
                border
            >
                <el-table-column
                    prop="intro_complete_user_count"
                    label="自我介绍填充人数"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="intro_voice_complete_user_count"
                    label="语音填充人数"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="photos_complete_user_count"
                    label="照片墙填充人数"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    prop="tag_complete_user_count"
                    label="标签填充人数"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
            </el-table>
        </el-dialog>
        <!-- 主页三元素 -->
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import shopHead from '@/components/shop-head';
import zdTree from '@/components/social-data/zd-tree';
import zdAddTree from '@/components/social-data/zd-tree-add';
import { getDate } from '@/assets/js/utils';
export default {
    mixins: [back],
    components: {
        shopHead,
        zdTree,
        zdAddTree
    },
    data () {
        return {
            social: {
                social_match: '匹配数据大盘',
                social_match_data: '匹配页面数据',
                socilal_answer: '答题流程数据',
                social_im: 'IM对话数据',
                social_page: '自己个人主页数据',
                social_match_type: '火柴-火焰漏斗',
                social_school: '我的大学墙数据大盘',
                school_data: '身份认证数据',
                class_verify_data: '班级认证数据'
            },
            //侧边导航
            menuScrollTop: [],
            menuIndex: 0,
            navHeight: 0,
            navList: [],
            //身份认证数据
            socialVerfy: {},
            social_verfy: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //班级认证数据
            classVerifyData: {},
            class_verfy: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //总大学页
            socialSchool: {},
            social_school: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            socialSchoolData: {},
            social_data: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //匹配留存率
            socialRetain: [],
            //火柴-火焰漏斗
            socialMyMatch: {},
            social_my_math: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //自己个人主页数据
            list: [],
            dialogVisible: false,
            socialMyPage: {},
            socialPage: {},
            social_page: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //IM对话数据
            socialIm: {},
            social_im: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //答题流程数据
            socialAnswer: {},
            socilal_answer: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //匹配页面数据
            socialMatchData: {},
            social_match_data: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //匹配页面新增访客解析
            socialAddVisitor: {},
            social_add_visitor: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //匹配页面访客解析
            socialVisitor: {},
            social_visitor: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            //匹配数据大盘
            socialMatch: {},
            social_match: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            // 社交模块指标
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
            //权限
            authResult: {},
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            }
        };
    },
    filters: {
        isNaN (val) {
            if (isNaN(val)) {
                return 0;
            } else {
                return val;
            }
        }
    },
    computed: {},
    watch: {},
    /**
     * auth_match_data  匹配数据大盘
     * auth_match_visitor   匹配页面访客解析
     * auth_new_visitor 匹配页面新增访客解析
     * auth_use 匹配页面数据
     * auth_active  匹配留存率
     * auth_exam    答题流程数据
     * auth_im  im对话数据
     * auth_page    个人主页数据
     * auth_my_page 我的访客率
     */
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '社交数据大盘'}]);
        this.authResult = this.$route.meta.authResult;

        this.fnGetMatchList(this.getDate(0), this.getDate(1));//匹配数据大盘
        this.fnGetVisitor(this.getDate(0), this.getDate(1));//匹配页面访客解析
        this.fnGetAddVisitor(this.getDate(0), this.getDate(1));//匹配页面新增访客解析
        this.fnGetMatchData(this.getDate(0), this.getDate(1));//匹配页面数据
        this.fngetRetain(1);//匹配留存率
        this.fnGetSchool(this.getDate(0), this.getDate(1));//我的大学墙数据大盘
        this.fnGetSchoolData(this.getDate(0), this.getDate(1));//我的大学墙数据大盘/其它数据
        this.fnGetverfy(this.getDate(0), this.getDate(1));//身份认证数据
        setTimeout(()=>{
            this.fnGetAnswer(this.getDate(0), this.getDate(1));//答题流程数据
            this.fnGetIm(this.getDate(0), this.getDate(1));//im对话数据
            this.fnGetPage(this.getDate(0), this.getDate(1));//自己个人主页数据
            this.fnGetMyPage();
            this.getMyMatch(this.getDate(0), this.getDate(1));//我的火柴火焰
        },1500);
        //获取班级认证数据
        this.fnGetClassVerifyData(this.getDate(0), this.getDate(1));
    },
    methods: {
        /**
         * 数据筛选
         */
        fnFilterData (type) {
            // getDate
            if(type == 1) {//我的大学墙数据
                if(this.social_school.date === null || this.social_school.date == '' || this.social_school.date.length < 1) {
                    this.fnGetSchool(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetSchool(getDate(new Date(this.social_school.date[0])) * 1000, getDate(new Date(this.social_school.date[1])) * 1000);
                }
            } else if (type == 2) {//我的大学墙数据/其它数据
                if(this.social_data.date === null || this.social_data.date == '' || this.social_data.date.length < 1) {
                    this.fnGetSchoolData(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetSchoolData(getDate(new Date(this.social_data.date[0])) * 1000, getDate(new Date(this.social_data.date[1])) * 1000);
                }
            } else if (type == 3) {//身份认证数据
                if(this.social_verfy.date === null || this.social_verfy.date == '' || this.social_verfy.date.length < 1) {
                    this.fnGetverfy(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetverfy(getDate(new Date(this.social_verfy.date[0])) * 1000, getDate(new Date(this.social_verfy.date[1])) * 1000);
                }
            } else if (type == 4) {//匹配数据大盘
                if(this.social_match.date === null || this.social_match.date == '' || this.social_match.date.length < 1) {
                    this.fnGetMatchList(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetMatchList(getDate(new Date(this.social_match.date[0])) * 1000, getDate(new Date(this.social_match.date[1])) * 1000);
                }
            } else if (type == 5) {//匹配页面访客解析
                if(this.social_visitor.date === null || this.social_visitor.date == '' || this.social_visitor.date.length < 1) {
                    this.fnGetVisitor(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetVisitor(getDate(new Date(this.social_visitor.date[0])) * 1000, getDate(new Date(this.social_visitor.date[1])) * 1000);
                }
            } else if (type == 6) {//匹配页面新增访客解析
                if(this.social_add_visitor.date === null || this.social_add_visitor.date == '' || this.social_add_visitor.date.length < 1) {
                    this.fnGetAddVisitor(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetAddVisitor(getDate(new Date(this.social_add_visitor.date[0])) * 1000, getDate(new Date(this.social_add_visitor.date[1])) * 1000);
                }
            } else if (type == 7) {//匹配页面数据
                if(this.social_match_data.date === null || this.social_match_data.date == '' || this.social_match_data.date.length < 1) {
                    this.fnGetMatchData(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetMatchData(getDate(new Date(this.social_match_data.date[0])) * 1000, getDate(new Date(this.social_match_data.date[1])) * 1000);
                }
            } else if (type == 8) {//答题流程数据
                if(this.social_answer.date === null || this.social_answer.date == '' || this.social_answer.date.length < 1) {
                    this.fnGetAnswer(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetAnswer(getDate(new Date(this.social_answer.date[0])) * 1000, getDate(new Date(this.social_answer.date[1])) * 1000);
                }
            } else if (type == 9) {//IM对话数据
                if(this.social_im.date === null || this.social_im.date == '' || this.social_im.date.length < 1) {
                    this.fnGetIm(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetIm(getDate(new Date(this.social_im.date[0])) * 1000, getDate(new Date(this.social_im.date[1])) * 1000);
                }
            } else if (type == 10) {//自己个人主页数据
                if(this.social_page.date === null || this.social_page.date == '' || this.social_page.date.length < 1) {
                    this.fnGetPage(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetPage(getDate(new Date(this.social_page.date[0])) * 1000, getDate(new Date(this.social_page.date[1])) * 1000);
                }
            } else if (type == 11) {//火焰漏斗
                if(this.social_my_math.date === null || this.social_my_math.date == '' || this.social_my_math.date.length < 1) {
                    this.getMyMatch(this.getDate(0), this.getDate(1));
                }else {
                    this.getMyMatch(getDate(new Date(this.social_my_math.date[0])) * 1000, getDate(new Date(this.social_my_math.date[1])) * 1000);
                }
            } else if (type == 14) {//班级认证数据
                if(this.class_verfy.date === null || this.class_verfy.date == '' || this.class_verfy.date.length < 1) {
                    this.fnGetClassVerifyData(this.getDate(0), this.getDate(1));
                }else {
                    this.fnGetClassVerifyData(getDate(new Date(this.class_verfy.date[0])) * 1000, getDate(new Date(this.class_verfy.date[1])) * 1000);
                }
            }
        },

        /**
         * 匹配数据大盘
         */
        fnGetMatchList (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_match_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialMatch = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 匹配页面访客解析
         */
        fnGetVisitor (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_match_visitor_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialVisitor = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 匹配页面访客解析
         */
        fnGetAddVisitor (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_match_new_visitor_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialAddVisitor = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 匹配页面数据
         */
        fnGetMatchData (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_match_use_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialMatchData = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 答题流程数据
         */
        fnGetAnswer (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_exam_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialAnswer = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * IM对话数据
         */
        fnGetIm (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_chat_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialIm = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 自己个人主页数据_筛选
         */
        fnGetPage (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_student_index_visitor_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialPage = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 自己个人主页数据_无筛选
         */
        fnGetMyPage () {
            this.$post('/student/statistic_social%5Cget_student_index_statistic', {}, resp => {
                if (resp.code == 1) {
                    this.socialMyPage = {
                        ...resp.data
                    };
                    this.list = [{
                        intro_complete_user_count: resp.data.intro_complete_user_count,
                        intro_voice_complete_user_count: resp.data.intro_voice_complete_user_count,
                        photos_complete_user_count: resp.data.photos_complete_user_count,
                        tag_complete_user_count: resp.data.tag_complete_user_count
                    }];
                    console.log(this.list, 'list');
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 匹配留存率
         */
        fngetRetain (page) {
            this.$post('/student/statistic_social%5Cget_match_active_statistic', {
                page_id: page || this.page.now_page
            }, resp => {
                if (resp.code == 1) {
                    this.socialRetain = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 我的火柴火焰
         */
        getMyMatch (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_chat_candle_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialMyMatch = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 我的大学墙数据大盘
         */
        fnGetSchool (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_school_page_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialSchool = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 我的大学墙数据，其它数据
         */
        fnGetSchoolData (start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_school_praise_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialSchoolData = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 身份认证数据
         */
        fnGetverfy(start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_student_verify_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialVerfy = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取班级认证数据
         */
        fnGetClassVerifyData(start_time, end_time) {
            this.$post('/student/statistic_social%5Cget_college_class_statistic', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.classVerifyData = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 0 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            width: 100%;
            padding-top: 20px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 15px 30px 15px;
        margin-bottom: 10px;
        .student-content {
            width: 100%;
            display: flex;
            background: #F4F4F4;
            .zd-student-tree {
                background: #ffffff;
                width: calc(100% / 2 + 100px);
                padding: 12px 15px 15px 15px;
            }
            .zd-student-tree:nth-child(2) {
                width: calc(100% / 2  - 100px);
                margin-left: 10px;
            }
        }
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
            &-right {
                display: flex;
                align-items: center;
                color: #3F454B;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    .main-flow-banner {
        width: 100%;
    }
    .main-funnel {
        width: calc((100% - 10px) / 2);
        padding: 12px 15px 30px 15px;
        box-sizing: border-box;
        background: #ffffff;
        margin-left: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .main-funnel-cont {
            padding: 30px 100px 30px 101px;
            display: flex;
            height: 132px;
            align-items: center;
            justify-content: center;
            .main-cont-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                .el-button-hover {
                    background: transparent;
                    border: none;
                    position: absolute;
                    top: -10px;
                    left: 65px;
                }
                .main-list-title {
                    color: #000000;
                    font-size: 14px;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                .main-list-cont {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #81DFEA;
                    .main-list-ratio {
                        height: 40px;
                        line-height: 40px;
                        color: #ffffff;
                        font-size: 21px;
                        margin-top: 18px;
                        font-weight: 500;
                    }
                    .main-list-number {
                        height: 22px;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .mail {
                    background: #EAAC50;
                }
                .blue {
                    background: #81A8EA;
                }
                .green {
                    background: #64B76D;
                }
                .orig {
                    background: #EAAC50;
                }
                .red {
                    background: #FF7470;
                }
            }
            .main-cont-arrow {
                display: flex;
                height: 100%;
                width: 35px;
                justify-content: center;
                .main-arrow-list {
                    display: flex;
                    height: 13px;
                    align-items: center;
                    margin: 48px 6px 0 8px;
                    .main-arrow-line {
                        width: 20px;
                        height: 1px;
                        background: #D8D8D8;
                    }
                    .main-arrow-delta {
                        width: 0px;
                        height: 0px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent transparent transparent #D8D8D8;
                    }
                }
            }
        }
    }
    .funnel-content {
        width: 100%;
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                cursor: pointer;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
        .zd-list:nth-child(n + 6) {
            margin-top: 57px;
        }
    }
    .zd-data-fore .zd-list {
        width: calc(100% / 4);
    }
    .zd-data-card .zd-list {
        width: calc(100% / 2);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* banner */
    .banner {
        width: 100%;
        display: flex;
        flex-direction: column;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
        .banner-top {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            margin-bottom: 10px;
        }
        .banner-bottom {
            display: flex;
            padding: 12px 15px 30px 15px;
            background: #ffffff;
            flex-direction: column;
            min-height: 273px;
            .main-seat {
                margin-bottom: 15px;
            }
        }
        .banner-bottom-jing {
            border: none;
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: rgb(65, 159, 231);
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .socialDataAnalysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
    }
</style>
